<template>
  <a-flex class="navigator">
    <a-dropdown>
      <a class="ant-dropdown-link title-com" @click.prevent>
        {{ companyStore.nowComName }}
        <DownOutlined/>
      </a>
      <template #overlay>
        <a-menu @click="onClick">
          <a-menu-item v-for="item in companyStore.companyList" :key="item.id">{{ item.com_name }}</a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
    <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" @click="onMenuClick"/>
    <!--    <a-dropdown>-->
    <!--      <template #overlay>-->
    <!--        <a-menu @click="handleMenuClick">-->
    <!--          <a-menu-item key="1">-->
    <!--            <UserOutlined />-->
    <!--            1st menu item-->
    <!--          </a-menu-item>-->
    <!--          <a-menu-item key="2">-->
    <!--            <UserOutlined />-->
    <!--            2nd menu item-->
    <!--          </a-menu-item>-->
    <!--          <a-menu-item key="3">-->
    <!--            <UserOutlined />-->
    <!--            3rd item-->
    <!--          </a-menu-item>-->
    <!--        </a-menu>-->
    <!--      </template>-->
    <!--      <a-button>-->
    <!--        Button-->
    <!--        <DownOutlined />-->
    <!--      </a-button>-->
    <!--    </a-dropdown>-->
  </a-flex>
</template>
<script setup>
import {computed, onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {useCompanyStore} from "@/sotre/useCompanyStore.js";

const companyStore = useCompanyStore()

const current = ref(["docker"]);

const r = useRouter()

const items = computed(() => {
  return r.getRoutes().find(t => t.name === 'root').children.filter(i => !i.meta?.hideInMenu).map(item => {
    return {
      key: item.name,
      title: item.meta.title,
      label: item.meta.title,
      children: item.children ? item.children.map(x => {
        return {
          key: x.name,
          title: x.meta.title,
          label: x.meta.title,
        }
      }) : null,
    }
  })
});

const onClick = ({key}) => {
  companyStore.nowComID = key
  location.reload()
};

const onMenuClick = ({key}) => {
  r.push({name: key})
};

companyStore.getCompany()
onMounted(() => {
  current.value = [r.currentRoute.value.name]
})
</script>
<style scoped>
.title-com {
  line-height: 65px;
  font-size: 15px;
  width: 260px;
  word-break: keep-all;
  color: #000;
  font-weight: bold;
}
</style>
